<template>
  <div class="card">
    <h3>任务列表</h3>
        <div class="box">
            <div class="list" v-for="(item,index) in $store.state.list" :key="index"  >
                <div class="li" :class="{ unfinished: item.status==false }">
                    <input  type="checkbox" :checked="item.status"  @click="changeStatus(item)">
                    <span>{{item.id}}</span>
                    <span>{{item.name}}</span>
                    <span @click="del(item)">删除</span>
                </div>
            </div>
            <div v-show="$store.state.list==0" class="empty">
                任务列表为空,请添加一个任务!
            </div>
        </div>
  </div>
</template>

<script>
export default {
    methods:{
        changeStatus(item){
            this.$store.commit('changeStatus',item)
        },
        del(item){
            this.$store.commit('delete',item)
        }
    },
    
}
</script>

<style lang='scss' scoped>
    .box .list .li{
        color: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        padding-left: 10px;
        margin: 10px 0;
        background-color: lightseagreen;
        line-height: 40px;
    }
    .box .list .li span{
        width: 25%;
        display: inline-block;
        margin-right: 10px;
    }
    .box .list .li span:nth-child(2){
        width: 5%;
    }
    .box .list .li span:nth-child(4){
        text-align: right;
    }
    .empty{
    text-align: center;
    padding: 50px 0;
    }
    .box .list .unfinished{
            background-color: red;
        }
</style>